<template>
  <div class="areaAll">
    <img
      width="50px"
      height="50px"
      class="back"
      src="../assets/btnmusic/backlist.png"
      alt=""
      @click="goBack"
    />
    <div class="imgArea">
      <img width="100%" height="100%" :src="singerListMsg.coverImgUrl ||singerListMsg.picUrl" alt="" />
    </div>
    <h2 class="listTitle">{{ singerListMsg.copywriter }}</h2>
    <div class="listArea">
      <el-table
        :data="tableData"
        height="600"
        border
        style="width: 100%"
        class="lists"
        @row-click="handle"
      >
        <el-table-column prop="id" label="序号" width="100"> </el-table-column>
        <el-table-column prop="ar[0].name" label="歌手" width="150">
        </el-table-column>
        <el-table-column prop="name" label="歌曲名" width="450">
        </el-table-column>
        <el-table-column prop="al.name" label="专辑" width="450">
        </el-table-column>
      </el-table>
    </div>
    <div class="titleArea">
      <h2>歌手：{{ singerListMsg.name }}</h2>
      <p>{{ singerListMsg.description }}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "SongList",
  data() {
    return {
      singerListMsg: {},
      tableData: [],
    };
  },
  created() {
    this.getParams();
    this.getListMsg();
  },
  mounted() {
    this.getParams();
  },
  beforeDestroy() {},
  watch: {
    $route() {
      this.getParams();
    },
  },
  methods: {
    getParams() {
      this.singerListMsg = this.$route.query.list;
      console.log(this.singerListMsg)
    },
    goBack() {
      this.$router.back();
    },
    handle(row) {
      console.log(row);
      this.$store.commit({
        type: "song/SELECTSONGBYID",
        id: row.id,
        list: row,
      });
      this.$store.dispatch({
        type: "song/getSongLyric",
        id: row.id,
      });
      this.$store.commit("song/SETSONGLIST", this.tableData);
    },
    //获取歌单详情
    getListMsg() {
      axios
        .get("http://localhost:3000/artist/top/song", {
          params: {
            id: this.singerListMsg.id,
          },
        })
        .then((response) => {
            console.log('response',response.data.songs)
          this.tableData = response.data.songs;
        })
        .catch((error) => {
          console.warn(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.areaAll {
  height: 1000px;
  background-image: linear-gradient(25deg, #626b72, #939a9f, #c8cbce, #ffffff);
  padding-top: 100px;
  padding-left: 100px;
}
p {
  font-size: 12px;
  color: #495057;
}
.back {
  border-radius: 50%;
  border: 1px solid;
  position: absolute;
  top: 85px;
  right: 25px;
}
.back:hover {
  border: 2px solid;
  width: 50px;
  height: 50px;
}
.imgArea {
  float: left;
  width: 250px;
  height: 250px;
  border-radius: 25px;
  border: 1px solid #000;
  img {
    width: 250px;
    height: 250px;
    border-radius: 25px;
  }
}
.listTitle {
  float: left;
  margin-left: 150px;
  margin-top: 70px;
}
.listArea {
  float: left;
  height: 600px;
  border: 2px solid #626b72;
  margin-left: 150px;
  margin-right: 100px;
  margin-top: 10px;
}
.lists {
  font-size: 16px;
}
.titleArea {
  float: left;
  width: 250px;
  margin-top: -470px;
}
</style>